<template>
  <div class="cell_wrap">
    <!-- 一条文章 -->
    <van-cell>
      <!-- 标题 -->
      <template #title>
        <div class="title-box">
          <span>{{ artObj.title }}</span>
          <!-- 单图 -->
          <img
            v-if="artObj.cover.type === 1"
            v-lazy="artObj.cover.images[0]"
            alt=""
            class="thumb"
          />
        </div>
        <!-- 三图 -->
        <div v-if="artObj.cover.type > 1" class="thumb-box">
          <img
            class="thumb"
            v-lazy="str"
            v-for="(str, index) in artObj.cover.images"
            :key="index"
          />
        </div>
      </template>
      <template #label>
        <div class="label-box">
          <span
            >`` {{ artObj.aut_name }} &nbsp;&nbsp;&nbsp;
            {{ artObj.comm_count }}评论 &nbsp;&nbsp;&nbsp;
            {{ timeTo(artObj.pubdate) }}
          </span>
          <van-icon name="cross" @click="show = true" />
        </div>
      </template>
    </van-cell>
    <!-- 反馈面板 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      get-container="body"
    />
    <!-- @cancel="onCancel" -->
  </div>
</template>

<script>
// 图片懒加载
// vant 组件库 将v-lazy路径=图片 其实是自定义标签
// 反馈面板
// vant组件
// 删数据
import { timeTo } from '@/utils'
export default {
  data () {
    return {
      show: false,
      actions: [],
      oneActions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ]
    }
  },
  props: {
    artObj: Object
  },
  created () {
    // console.log(this.artObj)
    this.actions = this.oneActions // 默认一套反馈面板数据
  },
  methods: {
    timeTo: timeTo, // key是函数名, value是函数体(封装到了utils里面去)
    onSelect (action) {
      console.log('测试反馈面板的selected的效果')
      console.log(action)
      //   action第一个参数是name,第二个参数是索引
      if (action.name === '反馈垃圾内容') {
        //   开始切换另一个反馈面板

        // 给他一个新的数组
        this.actions = [
          {
            value: -1,
            name: '返回'
          },
          {
            value: 0,
            name: '其它问题'
          },
          {
            value: 1,
            name: '标题夸张'
          },
          {
            value: 2,
            name: '低俗色情'
          },
          {
            value: 3,
            name: '错别字多'
          },
          {
            value: 4,
            name: '旧闻重复'
          },
          {
            value: 6,
            name: '内容不实'
          },
          {
            value: 8,
            name: '侵权'
          },
          {
            value: 5,
            name: '广告软文'
          },
          {
            value: 7,
            name: '涉嫌违法犯罪'
          }
        ]
      } else if (action.name === '返回') {
        this.actions = this.oneActions // 返回一级反馈面板
      } else {
        // 删除文章
        this.$emit('removeArt', this.artObj.art_id, action.value)
      }
    }
  }
}
</script>

<style scoped lang="less">
/* .cell_wrap /deep/ .van-icon-cross{
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
} */

/* 方式2: 自定义cell的标题和label */
.title-box {
  // 标题样式
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box {
  // label描述样式
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
.van-cell {
  background: url("https://img1.baidu.com/it/u=3078691788,1881157151&fm=26&fmt=auto&gp=0.jpg")
    center;
  // background: url('https://img0.baidu.com/it/u=3620056857,4003792933&fm=26&fmt=auto&gp=0.jpg') center;
}
</style>
